<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色与背景</title>
    <style>
        h1{
            color: red;
            color: #00ff00;
            color: #00f;
            color: rgb(255, 0, 0);
            color: rgba(0, 0, 255, 0.5);
        }
        #d1{
            /* 设置元素的宽高,默认宽高是上级元素宽度的100%
            高度是内容高度.px表示像素,除0以外其他数值都必须要加px */
            height: 200px;
            width: 200px;
            /* 设置背景颜色 */
            background-color: red;
            /* 设置背景图片 */
            background-image: url(../notos/img/image-20230904151554922.png);
            /* 设置图片尺寸 */
            background-size: 200px 200px;
            /* 设置禁止重复 */
            background-repeat: no-repeat;
            /* 设置背景图像的位置:横众向偏移值(或者是百分比) */
            background-position: 40px 40px;
        }
        #d2{
            width: 611px;
            height: 376px;
            background-color: #e8e8e8;
            background-image: url("http://doc.vrd.net.cn/tstore_v1/images/itemCat/study_computer_img1.png");
            background-size: 318px 319px;
            background-repeat: no-repeat;
            background-position: 90% 40%;
        }
       #d3{
            width: 375px;
            height: 376px;
            background-color: #e8e8e8;
            background-image: url("http://doc.vrd.net.cn/tstore_v1/images/itemCat/study_computer_img2.png");
            background-size: 318px 319px;
            background-repeat: no-repeat;
            background-position: 90% 40%;
       }
    </style>
</head>
<body>
    <div id="d3"></div>
    <div id="d1">
        背景测试
    </div>
    <hr style="border: red solid 3px;">
    <div id="d2"></div>
    <h1>颜色测试</h1>
</body>
</html>